<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <meta charset="utf-8">
    <title>安全协议设计工具</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="css/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">

    <link rel="stylesheet" type="text/css" href="css/identify.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/account.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/control_index.css" />
    <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
    <link rel="stylesheet" type="text/css" href="css/myProtocol.css" />
    <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>

    <script src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/haidao.offcial.general.js"></script>
    <script type="text/javascript" src="js/select.js"></script>
    <script type="text/javascript" src="js/haidao.validate.js"></script>
    <script type="text/javascript" src="js/service.js"></script>
    <script src="zTree_v3/js/jquery.ztree.all.js"></script>
    <script src="zTree_v3/js/jquery.ztree.exhide.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/detailProtocolDesignData.js"></script>
    <script type="text/javascript" src="js/detailProtocolDesign.js"></script>

    <style>
        #protocolBody {
            width: 90%;
            padding: 15px 15px 20px 40px;
            margin-top: 40px;
            margin-left: 25px;
            margin-bottom: 20px;
        }

        #protocolBody img {
            margin-left: 30px;
            margin-top: 10px;
            width: 60%;
            height: 60%;
        }

        #protocolBody button {
            margin-top: 15px;
            border: 1px solid rgba(0, 0, 0, 0.7);
            border-radius: 5px;
        }

        #newProtocol {
            margin: 40px auto;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
            width: 95%;
            height: 750px;
        }

        #left {
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;

            margin: 2% 5% 0 5%;
            padding: 20px;
            display: inline-block;
            width: 43%;
            height: 90%;
            overflow: scroll;
        }

        #left:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        }

        #left p {
            display: inline-block;
            font-size: 13px;
        }

        #right {
            float: right;
            margin-top: 2%;
            margin-right: 5%;
            padding: 20px;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            display: inline-block;
            width: 40%;
            height: 90%;
        }

        #right:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
        }

        .fieldDesign {
            margin: 5px auto;
            width: 45%;
            height: 5%;
            font-size: 15px;
            display: inline-block;
        }

        .fieldDesign input {
            width: 90%;
            border: 1px solid rgba(0, 0, 0, 0.2);
            line-height: normal;
            text-align: left;
            border-radius: 5px;
        }

        .fieldDesign select {
            border-radius: 5px;
            height: 25px;
            width: 90%;
        }

        .fieldDesignButton {
            float: right;
            border: 1px solid rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            margin-top: 10px;
            margin-right: 2%;
            width: 15%;
            padding: 3px;
            font-size: 10px;
        }

        .fieldDesignButton:hover {
            box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
        }


        /*ztree*/
        .ztree li span.button.switch.level0 {
            visibility: hidden;
            width: 1px;
        }

        .ztree li ul.level0 {
            padding: 0;
            background: none;
        }

        .ztree * {
            font-size: 18px;
        }
    </style>

</head>

<body>
<div class="view-topbar" id="PostionTopFlag">
    <div class="topbar-console">
        <div class="tobar-head fl">
            <a href="#" class="topbar-home-link topbar-btn text-center fl">
                <img src="images/dwlogo.png"  class="logoimg" style="padding-top: 8px;padding-left: 5px"/>
            </a>
            <div  class="mynav" >
                <span>电力监控协议安全设计工具</span>
            </div>
        </div>
    </div>
    <div class="topbar-info">
        <ul class="fr">
            <li class="fl topbar-info-item">
                <div class="dropdown">
                    <a href="#" class="topbar-btn">
                        <span class="fl text-normal"><span class="username"></span> </span>
                        <span class="icon-arrow-down"></span>
                    </a>
                    <ul class="dropdown-menu topbar-btn-fontsize">
                        <li>
                            <a id="logout">退出</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="view-body">
    <div class="view-sidebar">
        <div class="sidebar-content">
            <div class="sidebar-nav sidebar-nav-fold operator-nav">
                <div class="sidebar-title ">
                    <a href="javascript:void(0)" id="viewProtocol">
                        <span class="icon"><b class="fl icon-arrow-down"></b></span>
                        <span class="text-normal">协议预览</span>
                    </a>
                </div>
                <ul class="sidebar-trans" >
                    <li id="preview101">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-101</span>
                        </a>
                    </li>
                    <li id="preview104">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC60870-5-104</span>
                        </a>
                    </li>
                    <li id="previewgoose">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-GOOSE</span>
                        </a>
                    </li>
                    <li id="previewsv">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-SV</span>
                        </a>
                    </li>
                    <li id="previewmms">
                        <a href="#">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">IEC61850-MMS</span>
                        </a>
                    </li>
                    <li id="previewdnp3">
                        <a href="previewDNP3.html">
                            <b class="sidebar-icon"></b>
                            <span class="text-normal">DNP3</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="designProtocol">
                        <span class="text-normal ml-5 mloader" >协议设计</span>
                    </a>
                </div>
            </div>

            <div class="sidebar-nav operator-nav">
                <div class="sidebar-title">
                    <a href="#" id="testProtocol" >
                        <span class="text-normal ml-5">协议测试</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="view-product" id="PostionLeftFlag">
        <div class="content-header">
            <ol class="breadcrumb">
                <li>
                    <a href="index.html" title="主页"><i class="fa fa-home"> 主页</i> </a>
                </li>
                <li>
                    <a href="designProtocol.html" title="返回上级"> 协议设计 </a>
                </li>
                <li>查看和修改协议设计</li>

                <li style="float: right;">
                    <button id="saveEditon" title="点击保存" style="border: 1px solid rgb(100,100,100);border-radius: 5px;" >
                        <i class="fa fa-save fa-lg"></i> 点击保存修改
                    </button>
                </li>
            </ol>
        </div>
        <div class="message-manage">
            <div class="manage-record margin-lr">

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="identity" class="next" style="font-family: '微软雅黑';"><i
                            class="fa fa-handshake-o fa-lg"></i> 认证协商
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="encryption" class="next" style="font-family: '微软雅黑';"><i class="fa fa-key fa-lg"></i>
                        数据加密
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="exception" class="next" style="font-family: '微软雅黑';"><i class="fa fa-wrench fa-lg"></i>
                        异常检测
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="defend" class="next" style="font-family: '微软雅黑';"><i class="fa fa-shield fa-lg"></i>
                        防病毒设计
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="resend" class="next" style="font-family: '微软雅黑';"><i class="fa fa-upload fa-lg"></i>
                        重传及防重放
                    </button>
                </div>

                <div style="display: inline-block;margin-right: 15px;" class="attrButton">
                    <button id="integrity" class="next" style="font-family: '微软雅黑';"><i
                            class="fa fa-paint-brush fa-lg"></i> 完整性校验
                    </button>
                </div>

            </div>

            <div id="newProtocol">

                    <div id="left">

                        <div style="margin-bottom: 20px">
                            <li class="fa fa-hand-o-right fa-2x"></li> <p>点击顶部功能栏的按钮，对协议进行安全设计，保存后进行协议具体配置:</p>
                            <br>
                            <div style="display: inline-block;margin-right: 15px;margin-top: 10px;margin-bottom: 5px" class="attrButton">
                                <button id="addBtn" class="next" style="font-family: '微软雅黑';border-radius: 10px"><i
                                        style="color: forestgreen;" class="fa fa-plus-square fa-lg"></i> 增加用户自定义字段
                                </button>
                            </div>

                            <div style="display: inline-block;margin-right: 15px;margin-top: 10px;margin-bottom: 5px" class="attrButton">
                                <button id="removeBtn" class="next" style="font-family: '微软雅黑';border-radius: 10px"><i
                                        style="color: red;"  class="fa fa-times-circle fa-lg"></i> 移除用户自定义字段
                                </button>
                            </div>
                        </div>
                        <hr>
                        <ul id="myDemo" class="ztree"></ul>

                    </div>

                    <div id="right">
                        <!--原有报文-->
                        <h1 style="color: rgb(99, 194, 222);">原有DNP3报文格式</h1>
                        <img src="images/DNP3/dnp3-1.png" style="display: block;width: 65%;height: 65%;margin:5px auto">
                        <hr/>

                        <div style="margin-top: 20px;" id="fieldArea">

                            <div class="fieldDesign">
                                <label for="fieldName" class="control-label"><span style="color: red;">*</span>字段名称：</label>
                                <input type="text" disabled name="fieldName" id="fieldName" value="" maxlength="10" placeholder="必填项(字数不超过10)">
                            </div>
                            <div class="fieldDesign">
                                <label for="description" class="control-label">字段说明：</label>
                                <input type="text" disabled name="description" id="description" maxlength="20" value="" placeholder="选填项(字数不超过20)">
                            </div>
                            <div class="fieldDesign">
                                <label for="funcType" class="control-label"><span style="color: red;">*</span>功能类型：</label>
                                <select id="funcType" disabled>
                                    <option value="null" disabled selected>请选择字段的功能类型</option>
                                    <option value="encryTag" id="encryTag">加密标识字段</option>
                                    <option value="encryAlgField" id="encryAlgField">加密算法字段</option>
                                    <option value="encryAreaField" id="encryAreaField">加密区域字段</option>
                                    <option value="encryOutputField" id="encryOutputField">加密输出字段</option>
                                    <option value="encryResField" id="encryResField">加密结果字段</option>
                                    <option value="virusTag" id="virusTag">防病毒标识字段</option>
                                    <option value="virusMethodField" id="virusMethodField">防病毒方法字段</option>
                                    <option value="IntegrityTag" id="IntegrityTag">完整性标识字段</option>
                                    <option value="IntegrityValField" id="IntegrityValField">完整性校验值字段</option>
                                    <option value="IntegrityResField" id="IntegrityResField">完整性校验结果字段</option>
                                    <option value="IntegrityMethodField" id="IntegrityMethodField">完整性校验方法字段</option>
                                    <option value="exceptionTag" id="exceptionTag">异常标识字段</option>
                                    <option value="exceptionMethodField" id="exceptionMethodField">异常检测方法字段</option>
                                    <option value="exceptionValField" id="exceptionValField">异常检测值字段</option>
                                    <option value="exceptionResField" id="exceptionResField">异常检测结果字段</option>
                                    <option value="replayCheckField" id="replayCheckField">重放检测标识字段</option>
                                    <option value="resendCheckField" id="resendCheckField">重传检测标识字段</option>
                                    <option value="resendUniqueField" id="resendUniqueField">重传唯一性标识字段</option>
                                    <option value="overtimeCheckField" id="overtimeCheckField">超时检测标识字段</option>
                                    <option value="communicationResField" id="communicationResField">通信状态指示位字段</option>
                                    <option value="timeSignField" id="timeSignField">时间戳标识字段</option>
                                    <option value="customFuncField" id="customFuncField">自定义功能字段</option>
                                </select>
                            </div>

                            <div class="fieldDesign">
                                <label for="fieldType" class="control-label">字段类型：</label>
                                <select id="fieldType" disabled>
                                    <option value="null" selected >-----------------------------------</option>
                                    <option value="fixedFiled" id="fixedField">协议固定字段(自动判定)</option>
                                    <option value="customFiled" id="customField">推荐自定义字段(自动判定)</option>
                                    <option value="userField" id="userField">用户自定义字段(自动判定)</option>
                                </select>
                            </div>
                            <button class="fieldDesignButton" disabled id="fieldBtn"><i class="fa fa-arrow-right fa-1x"></i> 确认
                            </button>
                        </div>


                    </div>
                </div>

        </div>

    </div>
</div>
</body>
<script>
    $(function(){
        $.get("topbar.html",function (data) {
            $(".view-topbar").empty();
            $(".view-topbar").html(data)
        });
        $.get("siderbar.html", function(data) {
            $(".view-sidebar").html(data);
            $("#designProtocol").css("background","#40BEA6");
        });
    });
    checkRole('operator');
</script>

</html>